<template>
  <div class="w-1/3 mx-auto mt-40 shadow-2xl shadow-blue-300 rounded-box">
    <div class="w-3/4 mx-auto pt-4">
      <label class="input input-bordered flex items-center gap-2 my-4">
        Name
        <input type="text" class="grow" v-model="name" />
      </label>

      <label class="input input-bordered flex items-center gap-2 my-4">
        Class
        <input type="text" class="grow" v-model="classInfo" />
      </label>

      <select class="select select-bordered w-full mb-4" v-model="gender">
        <option disabled>Choose Gender</option>
        <option>Male</option>
        <option>Female</option>
      </select>
    </div>

    <div class="text-center">
      <button class="btn btn-primary my-2">Create Student</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('Alex');
const studentId = ref('123');
const classInfo = ref('Class 1 | Year 8');

const gender = ref('Male');
</script>
